<html>
<h2>Danh sách Sản phẩm</h2>
<p id="page-intro">Danh sách sản phẩm trên website</p>
<div class="clear"></div>
<div class="content-box">
    <div class="content-box-header">
        <h3>Danh sách Sản phẩm</h3>
    </div>
    <div class="content-box-content">
        <form action="javascript:void(0);">
            <span>Hiển thị theo danh mục: </span>
            <select name="category" class="small-input">
                <option value="0">Chọn danh mục sản phẩm</option>
                <option value="1">Trang Sức Nam</option>
                <option value="4">&#8212; Khuyên Tai Nam</option>
                <option value="5">&#8212; Lắc Nam</option>
                <option value="6">&#8212; Nhẫn Nam</option>
                <option value="7">&#8212; Mặt Dây Nam</option>
                <option value="2">Trang Sức Nữ</option>
                <option value="8">&#8212; Khuyên Tai Nữ</option>
                <option value="9">&#8212; Lắc Nữ</option>
                <option value="10">&#8212; Nhẫn Nữ</option>
                <option value="11">&#8212; Mặt Dây Nữ</option>
            </select>
            <br /><br />
            Tên sản phẩm: <input class="text-input small-input" type="text" />  <a class="alt btn" href="#">Tìm kiếm</a>
        </form>
        <form action="javascript:void(0);">
        <table>
            <thead>
                <tr>
                    <th class="left"><input class="check-all" type="checkbox" /></th>
                    <th>Hình ảnh</th>
                    <th class="left">Tên Sản phẩm</th>
                    <th class="left">Danh mục</th>
                    <th>Giá</th>
                    <th>Trạng thái</th>
                    <th>HOT?</th>
                    <th>Thao tác</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="product" value="1" /> </td>
                    <td class="center"><img class="thumb" src="../upload/products/thumbs/nhannu01.jpg" alt="Nhẫn nữ 01" /></td>
                    <td><h6><a class="edit" href="#" title="Nhẫn nữ 01">Nhẫn Nữ 01</a></h6> </td>
                    <td><h6><a href="#" title="Nhẫn Nữ">Nhẫn Nữ</a></h6> </td>
                    <td class="center">250.000 VND </td>
                    <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /> </td>
                    <td class="center"><img class="clickable" src="images/icons/cross_circle.png" alt="Disable" /> </td>
                    <td class="center">
                        <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                        <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="product" value="2" /> </td>
                    <td class="center"><img class="thumb" src="../upload/products/thumbs/nhannam01.jpg" alt="Nhẫn Nam 01" /></td>
                    <td><h6><a class="edit" href="#" title="Nhẫn Nam 01">Nhẫn Nam 01</a></h6> </td>
                    <td><h6><a href="#" title="Nhẫn Nam">Nhẫn Nam</a></h6> </td>
                    <td class="center">370.000 VND </td>
                    <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /> </td>
                    <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /> </td>
                    <td class="center">
                        <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                        <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="product" value="3" /> </td>
                    <td class="center"><img class="thumb" src="../upload/products/thumbs/lacnam01.jpg" alt="Lắc Nam 01" /></td>
                    <td><h6><a class="edit" href="#" title="Lắc Nam 01">Lắc Nam 01</a></h6> </td>
                    <td><h6><a href="#" title="Lắc Nam">Lắc Nam</a></h6> </td>
                    <td class="center">455.000 VND </td>
                    <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /> </td>
                    <td class="center"><img class="clickable" src="images/icons/cross_circle.png" alt="Disable" /> </td>
                    <td class="center">
                        <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                        <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="product" value="4" /> </td>
                    <td class="center"><img class="thumb" src="../upload/products/thumbs/khuyentainam01.jpg" alt="Khuyên Tai Nam 01" /></td>
                    <td><h6><a class="edit" href="#" title="Khuyên Tai Nam 01">Khuyên Tai Nam 01</a></h6> </td>
                    <td><h6><a href="#" title="Khuyên Tai Nam">Khuyên Tai Nam</a></h6> </td>
                    <td class="center">255.000 VND </td>
                    <td class="center"><img class="clickable" src="images/icons/cross_circle.png" alt="Active" /> </td>
                    <td class="center"><img class="clickable" src="images/icons/cross_circle.png" alt="Disable" /> </td>
                    <td class="center">
                        <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                        <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="product" value="5" /> </td>
                    <td class="center"><img class="thumb" src="../upload/products/thumbs/lactaynu01.jpg" alt="Lắc Tay Nữ 01" /></td>
                    <td><h6><a class="edit" href="#" title="Lắc Tay Nữ 01">Lắc Nữ 01</a></h6> </td>
                    <td><h6><a href="#" title="Lắc Nữ">Lắc Nữ</a></h6> </td>
                    <td class="center">455.000 VND </td>
                    <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /> </td>
                    <td class="center"><img class="clickable" src="images/icons/cross_circle.png" alt="Disable" /> </td>
                    <td class="center">
                        <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                        <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="product" value="6" /> </td>
                    <td class="center"><img class="thumb" src="../upload/products/thumbs/khuyentainu01.jpg" alt="Khuyên Tai Nữ 01" /></td>
                    <td><h6><a class="edit" href="#" title="Khuyên Tai Nữ 01">Khuyên Tai Nam 01</a></h6> </td>
                    <td><h6><a href="#" title="Khuyên Tai Nữ">Khuyên Tai Nữ</a></h6> </td>
                    <td class="center">255.000 VND </td>
                    <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /> </td>
                    <td class="center"><img class="clickable" src="images/icons/cross_circle.png" alt="Disable" /> </td>
                    <td class="center">
                        <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                        <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="8">
                    <div class="bulk-actions align-left">Với các hàng được chọn:
                        <a href="#" class="alt btn" rel="delete">Xoá</a>
                    </div>
                    <div class="pagination">
                        <a href="#" class="number" title="Trang đầu">&#0171;</a><a class="number" href="#" title="Trang trước">&#0139;</a>
                        <a href="#" class="number current" title="1">1</a>
                        <a href="#" class="number" title="2">2</a>
                        <a href="#" class="number" title="3">3</a>
                        <a href="#" class="number" title="4">4</a>
                        <a href="#" class="number" title="Trang sau">&#0155;</a><a href="#" class="number" title="Trang cuối">&#0187;</a>
                    </div> <!-- End .pagination -->
                    <div class="clear"></div>
                </td>
            </tr>
            </tfoot>
        </table>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        //Tạo event click check all checkbox
        $('.check-all').click(function(){
            $(this).parent().parent().parent().parent()
                    .find("input[type='checkbox']")
                    .attr('checked', $(this).is(':checked'));
        });
        //Đổi màu các hàng chẵn
        $('tbody tr:even').addClass("alt-row");
        //Tạo event click cho các link Xoá danh mục
        $('a.delete').click(function(){
            if(confirm("Bạn muốn xoá?")){
                $(this).parent().parent().find("input[type='checkbox']").each(function(){
                    removeRow(this);
                });
            }
            return false;
        });
        $('a.edit').click(function(){
            window.location.href = 'index.html#edit_product';
            jewelryCP.loadItem('edit_product', $("#main-nav li a.nav-top-item.current"));
            return false;
        });
        //Tạo event click cho nút Xoá
        $('a[rel="delete"]').click(function(){
            if(confirm("Bạn muốn xoá?")){
                $('table').find("input[type='checkbox']:checked").each(function(){
                    if(this.className!='check-all'){
                        removeRow(this);
                    }
                });
            }
            return false;
        });
        $('img.clickable').click(function(){
            if(this.alt=='Active'){
                $(this).attr('src','images/icons/cross_circle.png').attr('alt','Disable');
            } else {
                $(this).attr('src','images/icons/tick_circle.png').attr('alt','Active');
            }
        }).css('cursor','pointer');
    });
    //Hàm xoá 1 hàng
    function removeRow(obj){
        $(obj).parent().parent().fadeOut('slow',function(){
            $(this).remove();
        });
    }
</script>
</html>